<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>商品分类</title>
    <style>
        * {padding:0;margin:0;font-size:14px}
        img {border:0 none}
        button {height:26px;padding:5px}

        /*标题栏*/
        .title {
            height:30px;
            line-height:30px;
            border-bottom:1px solid #efefef;
            background-color:#0b58a2;
            font-weight:bold
        }

        /*查询栏*/
        .qry {
            height:35px;
            line-height:35px;
            border-bottom:1px solid #efefef;
            background-color: #addfee;
        }

        /*按钮兰*/
        .bar {
            height:26px;
            line-height:26px
        }

        /*数据栏*/
        .data {

        }

        .data table {
            width:100%;
            border:1px solid #efefef;
            border-collapse:collapse;
        }

        .data .page {
            height:30px;
            background-color: #ccedea;
            text-align:center
        }
    </style>
    <script>
        //清除表格
        var clear = function() {
            //获取表格对象
            var grid_obj = document.getElementById('cateGrid');
            //如果表格的行数 > 1的话
            while (grid_obj.rows.length > 1) {
                grid_obj.deleteRow(-1);
            }
        };
        //填充表格(参数为单个对象)
        var fill = function(d) {
            //获取表格对象
            var grid_obj = document.getElementById('cateGrid');
            var row = grid_obj.insertRow(-1);//tr

            var cell1 = row.insertCell(-1);
            cell1.style.textAlign = 'right';
            cell1.innerText = d.id;

            var cell2 = row.insertCell(-1);
            cell2.innerText = d.name;

            var cell3 = row.insertCell(-1);
            cell3.style.textAlign = 'center';
            //状态 0:禁用 1:启用 2:删除
            var _text = '';
            switch (d.status) {
                case 0:
                    _text = '禁用';
                    break;
                case 1:
                    _text = '启用';
                    break;
                case 2:
                    _text = '删除';
                    break;
            }
            cell3.innerText = _text;

            var cell4 = row.insertCell(-1);
            cell4.style.textAlign = 'center';
            cell4.innerHTML = '<button>修改</button><button>删除</button>';
        };

        //用于获取相应页数的数据
        //num[页数]   size[每页几笔]    data[原始数据]
        var getPageData = function(num, size, data) {
            var reArr = [];
            var start = size * (num - 1);

            for (var i = 0; i < size; i++) {
                if (data[start]) {
                    reArr.push(data[start++]);
                }
            }
            return reArr;
        };
    </script>
    <script>
        //表格的数据
        var grid_data = [
            {"id":1,  "name":"家用电器", "status":1},
            {"id":2,  "name":"手机/运营商/数码", "status":1},
            {"id":3,  "name":"电脑/办公", "status":1},
            {"id":4,  "name":"家居1/家具/家装/厨具", "status":1},
            {"id":5,  "name":"家居2/家具/家装/厨具", "status":0},
            {"id":6,  "name":"家居3/家具/家装/厨具", "status":0},
            {"id":7,  "name":"家居4/家具/家装/厨具", "status":1},
            {"id":8,  "name":"家居5/家具/家装/厨具", "status":2},
            {"id":9,  "name":"家居6/家具/家装/厨具", "status":1},
            {"id":10, "name":"家居7/家具/家装/厨具", "status":0},
            {"id":11, "name":"家居8/家具/家装/厨具", "status":1},
            {"id":12, "name":"家居9/家具/家装/厨具", "status":1},
            {"id":13, "name":"家居a/家具/家装/厨具", "status":0},
            {"id":14, "name":"家居b/家具/家装/厨具", "status":2},
            {"id":15, "name":"家居c/家具/家装/厨具", "status":1},
            {"id":16, "name":"家居d/家具/家装/厨具", "status":1},
            {"id":17, "name":"家居e/家具/家装/厨具", "status":1},
            {"id":18, "name":"家居f/家具/家装/厨具", "status":0},
            {"id":19, "name":"家居g/家具/家装/厨具", "status":1},
            {"id":20, "name":"家居h/家具/家装/厨具", "status":2},
            {"id":21, "name":"家居i/家具/家装/厨具", "status":1}
        ];

        //当前是第几页
        var num = 1;

        //默认每页笔数
        var page_size = 5;

        //表格的总页数
        var total_page = Math.ceil(grid_data.length / page_size);

        //填充分页表格的数据
        var fillGrid = function(n) {
            //记录当前页数
            num = n;

            //先清除数据
            clear();

            //刷表格的数据步骤
            //步骤一 : 获取对应页数的数据
            var _data = getPageData(n, page_size, grid_data);
            //步骤二 : 遍历数据，填充表格
            for (var i = 0; i < _data.length; i++) {
                fill(_data[i]);
            }

            document.getElementById('spaNum').innerText = num;
            document.getElementById('spaAll').innerText = total_page;
        };

        //页面加载完成
        window.onload = function() {
            //刷表格的第几页的数据
            fillGrid(num);

            //分页按钮事件
            document.getElementById('btnHome').onclick = function() {
                if (1 === num) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    fillGrid(1);
                }
            };
            document.getElementById('btnPrev').onclick = function() {
                if (1 === num) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    fillGrid(--num);
                }
            };
            document.getElementById('btnNext').onclick = function() {
                if (num === total_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    fillGrid(++num);
                }
            };
            document.getElementById('btnLast').onclick = function() {
                if (num === total_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    fillGrid(total_page);
                }
            };
            //分页按钮事件

            //切换每页几笔
            document.getElementById('selPageNum').onchange = function() {
                page_size = this.value;
                fillGrid(1);
            };
        };
    </script>
</head>
<body>
<div class = 'title' style = 'color:#fff'>商品分类管理</div>
<div class = 'data'>
    <table id = 'cateGrid' border = 1>
        <tr>
            <th style = 'width:10%'>ID</th>
            <th style = 'width:50%'>名称</th>
            <th style = 'width:10%'>状态</th>
            <th style = 'width:30%'>操作</th>
        </tr>
    </table>
    <div class = 'page'>
        <button id = 'btnHome'>首页</button>
        <button id = 'btnPrev'>上页</button>
        &nbsp;第<span id = 'spaNum'></span>页 / 一共有<span id = 'spaAll'></span>页&nbsp;
        <button id = 'btnNext'>下页</button>
        <button id = 'btnLast'>末页</button>
        每页<select id = 'selPageNum'><option value = 5>5</option><option value = 10>10</option><option value = 20>20</option></select>笔
    </div>
</div>
</body>
</html>